<template>
	<view class="shopVip">
		<cl-navbar :title="$t('my.index.vipCenter')" leftIconSize="40rpx" placeholder autoBack>
		</cl-navbar>
		
		<view class="shop-title">
			{{$t('user.upgrade')}}
		</view>
		<view class="shop-state">
			<view class="state-item pt-2" v-for="item in stateList" :key="item">
				<u-icon name="pushpin-fill" color="#333333" size="20"></u-icon>
				<view class="text">
					{{item}}
				</view>
			</view>
		</view>
		<view class="shop-list">
			<view class="item" v-for="(item,index) in cateList" :key="index" @click="radioChange(index)">
				<view class="shop-active" v-if="index==1">
					Most popular
				</view>
				<view class="shop-item" :class="index==1?'active':''">
					<view class="radio" :class="active==index?'radio-active':''">

					</view>
					<!-- <radio :value="index" backgroundColor="#080808" borderColor="979797"
							activeBackgroundColor="#c79a57" :checked="item.checked" /> -->
					<view class="shop-center">
						<view class="center">
							<text class="shop-time">{{item.title}}</text>
							<text class="shop-all-price">￥{{item.price}}</text>
						</view>
						<view class="right">
							<view class="top">
								<text class="price">￥{{item.dayPrice}}</text>
								<text class="per">{{$t('user.per')}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shop-button" style="height: 80px;">

		</view>
		<view class="position-fixed bottom-0 left-0 right-0 safe-bottom">
			<view class="p-2">
				<!-- <u-button :text="$t('user.now')" shape="circle" :customStyle="{color:'#ffffff'}" color="#ED3737" @click="payOpen()" ></u-button> -->
				<u-button :text="$t('user.now')" shape="circle" :customStyle="{color:'#ffffff'}" color="linear-gradient(to right, #ff5b7a, #ff7a3d)" @click="$public.isShowtost('支付对接中～')" ></u-button>
				
			</view>
		</view>
		
		<!-- 支付方式弹窗 -->
		<u-popup mode="bottom" :show="payShow" @close="payClose" round="10" bgColor="#121314">
			<view class="" >
				<view class="p-4 pb-2 flex justify-between align-center">
					<text class="font32 colorF">{{$t('payset.payType')}}</text>
					<u-icon size="16" name="close" color="#888888" @click="payClose"></u-icon>
				</view>
				<view class="p-2 px-5">
					<view class="flex justify-between align-center py-2" v-for="(item,index) in payList" :key="index" @click="payClick(item)">
						<u-icon :label="item.title" size="24" :name="item.icon"></u-icon>
						<view class="">
							<u-icon size="16" name="checkmark-circle-fill" color="#FF4735" v-if="current==item.id"></u-icon>
							<u-icon size="16" name="checkmark-circle" color="#888888" v-else></u-icon>
						</view>
					</view>
				</view>
				<view class="px-3 pb-2">
					<u-button :text="$t('user.now')" shape="circle" :customStyle="{color:'#ffffff'}" color="linear-gradient(to right, #ff5b7a, #ff7a3d)" @click="getPayToken" :disabled="disabled"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stateList: [this.$t('user.watching'), this.$t('user.enjoy'), this.$t('user.stay')],
				cateList: [],
				active: 1,
				disabled:false,
				payShow:false,
				current:null,
				formData:{
					trade_type:'vip',
					trade_id:'',
					pay_type:'',
					coin_code:'money',
					token:''
				},
				payList:[],
				orderID:"",
			}
		},
		onLoad() {
			this.handleVipList()
			// this.getPayPlatform()
		},
		methods: {
			// 获取支付方式
			getPayPlatform(){
				this.$api.playlet.getPayPlatform({coin_code:'money'}).then(res=>{
					console.log("获取支付方式",res);
					this.payList=res.data.list
				})
			},
			handleVipList() {
				console.log("开始请求VIP列表");
				this.$api.playlet.getVideoVipList().then(res => {
					console.log('VIP', res);
					this.formData.trade_id=res.data.list[this.active].id
					this.cateList = res.data.list.map((item, index) => {
						let price = Number(item.price)
						let time = Number(item.time)
						let dayPrice = (price / time).toFixed(2)
						return {
							...item,
							dayPrice: dayPrice,
							save: index == 0 ? '' : '75'
						}
					})
				})
			},
			radioChange(e) {
				console.log("radioChange",e);
				this.active = e
				this.formData.trade_id=this.cateList[e].id
			},
			payClose(){
				this.payShow=false
				this.disabled=false
			},
			payOpen(){
				if(this.formData.trade_id==""){
					this.$public.isShowtost("请选择会员类型")
				}else{
					this.payShow=true
				}
			},
			// 获取支付token
			getPayToken(){
				if(this.formData.pay_type==""){
					this.$public.isShowtost("请选择支付方式")
				}else{
					// this.disabled=true
					console.log("用户ID",this.$store.state.playlet.isUserInfo.user_id);
					this.$api.playlet.getPayToken({user_id:this.$store.state.playlet.isUserInfo.user_id}).then(res=>{
						console.log("token",res);
						this.formData.token=res.data.token
						this.$api.playlet.getPay(this.formData).then(res => {
							console.log("生成订单返回",res);
							this.orderID=res.data.info.order_id
							this.payClose()
							this.orderStatus()
							this.disabled=false
							plus.runtime.openURL(res.data.info.url) 
						})
						
					})
				}
			},
			goPay(){
				this.$api.playlet.getPay(this.formData).then(res => {
					console.log("生成订单返回",res.data.info.payload);
					plus.runtime.openURL(res.data.info.payload) 
				})
			},
			payClick(item){
				this.current=item.id
				this.formData.pay_type=item.pay_type
			},
			orderStatus(){
				console.log("this.orderID",this.orderID);
				this.isSetInterval=setInterval(()=>{
					this.$api.playlet.orderStatus({id:this.orderID}).then(res=>{
						console.log("返回订单状态",res);
						if(res.data.status==2){
							clearInterval(this.isSetInterval)
							this.$public.isShowtost("会员开通成功")
						}
					})
				},2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shopVip {
		// background-color: #080808;
		padding: 10px 14px;
		overflow-y: auto;
	}

	.shop-title {
		font-size: 36px;
		letter-spacing: 0;
		font-weight: 700;
	}

	.shop-state {

		.state-item {
			font-size: 16px;
			font-weight: 700;
			display: flex;
			align-items: center;

			.img {
				width: 32px;
				height: 32px;
				margin: 10px;
			}
		}
	}

	.shop-list {
		margin-top: 20px;

		.item {
			.shop-active {
				background-image: linear-gradient(135deg, #DFB074 0%, #C39651 100%);
				font-size: 16px;
				color: #131313;
				font-weight: 700;
				height: 24px;
				line-height: 24px;
				text-align: center;
				border-radius: 6px 6px 0 0;
			}

			.shop-item {
				border: 1px solid #242424;
				border-radius: 6px;
				display: flex;
				margin-bottom: 13px;
				padding: 20px 15px;
				align-items: center;

				.radio {
					border: 1px solid #979797;
					width: 20px;
					height: 20px;
					border-radius: 50%;
					box-sizing: border-box;
					// <radio :value="index" backgroundColor="#080808" borderColor="979797"
					// 	activeBackgroundColor="#c79a57" :checked="item.checked" />
				}

				.radio-active {
					border: 5px solid #C79A57;

				}

				.shop-center {
					margin-left: 22px;
					width: calc(100% - 51px);
					display: flex;
					justify-content: space-between;

					.center {
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-weight: 500;

						.shop-time {
							font-size: 18px;

						}

						.shop-all-price {
							font-size: 16px;

						}
					}

					.right {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-end;

						.price {
							font-size: 32px;
							font-weight: 500;
						}

						.per {
							margin-left: 9px;
							font-size: 16px;
							font-weight: 700;
						}

						.bottom {
							background-color: linear-gradient(to right, #ff5b7a, #ff7a3d);
							border-radius: 11px;
							font-size: 14px;
							font-weight: 400;
							padding: 3px 7px;
						}
					}
				}

			}

			.active {
				border: 1px solid #C39651;
				border-radius: 0 0 6px 6px;
				background-color: #1b1b1b;
			}
		}
	}

	.shop-button {
		margin-top: 20px;

		.button {
			background-color: linear-gradient(to right, #ff5b7a, #ff7a3d);
			font-size: 20px;
			font-weight: 700;
			height: 44px;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.text {
			font-size: 14px;
			font-weight: 400;
			margin: 14px 0 24px 0;
			text-align: center;
		}
	}
</style>
